<!DOCTYPE html>
<html lang="en">
<head>
    <title>回复列表</title>
    <titleType style="display: none;">index</titleType>
    <%- include('../../_global/baseLibs') %>

    <style>
    
        .page-user .default-list > li .item-inner {
         margin-left: 0; 

       }
       .page-user .text-box .doc-base  .title{
         color: #666;
         
      }
      .page-user .text-box .doc-base  .flag{
         color: #666;
         float: right;
         
      }
      .page-user .tips-text {
        height: 2.5rem;
        line-height: 2.5rem;      
      }
      .page-user .text-box {
        position: absolute;
        left: 1rem;
      }
      .questionImage{
        padding-bottom: 1rem;
      }
      .questDetailInfo:after {
        content: '';
        
        left: 0;
        bottom: 0;
        right: auto;
        top: auto;
        height: 1px;
        width: 100%;
        background-color: #d8d8d8;
        display: table;
        z-index: 15;
        transform-origin: 50% 100%; }
        .docMes .docInfo{
          position: absolute;
           left: 6rem;
           width: 80%;
        }
        .docMes:after{
          
          height: 0;
        }
        .docMes .flag{
          float:right;
        }

    .questionImage img {
      width: 85%;
      height: 85%;
    }
    .questionContent{
       word-break:break-all;
       margin-left:1rem;
    }
    .default-list > li .item-inner:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    height: 0px;
    width: 100%;
    background-color: #d8d8d8;
    display: block;
    z-index: 15;
    transform-origin: 50% 100%;
}
li{
  background-color: #fff;
}
.doc_answer{
  margin-top: 1rem;

}

.page-wrap{

  background-color:transparent;
}
.plane-box{

  background-color:transparent;
}
   
   .answer_detail{
    color: #7BD6D9;
    border: 1px solid #7BD6D9;
    padding:0.3rem 1.3rem;

   }
   .questionImage{
    /*overflow-x:scroll;
    overflow-y: hidden;*/
   }
   .questionImage .image_li{
      width: 32%;
      float: left;
      overflow: hidden;
   }
   .questionImage .image_li img{
      width: 100%
   }

   #viewport {
  position: relative;
  width: 100%;
  height: 4rem;
  margin: 0 auto;
 
  overflow: hidden;
}

#wrapper {
  width: 6rem;
  height: 4rem;
 /* margin: 0 auto;*/
}

#scroller {
  position: absolute;
  z-index: 1;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  width: 800px;
  height: 4rem;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  text-size-adjust: none;
  
}

.slide {
  width: 6rem;
  float: left;
  padding:0 1rem;
}

.painting {
  width: 6rem;
  height: 4rem;
  border-radius: 10px;
  margin: 20px auto;
  
  
}
.questionTime{
  margin-left: 1rem;
  padding: 0.6rem 0;
}
.questDetailInfo .title{
  font-size: 1.4rem;
}
    </style>
    <script src="/static/js/crypto-js.js"></script>
    <script src="/static/lib/touchslider.js"></script>
    <script type="text/javascript" src="/static/js/iscroll.js"></script>
    <script>

        var page_consult = (function($, page_consult) {
            var key = "jkcs";

            $.JkcsUserInfo.getUserInfoGzd({
                callback: function(userInfo){
                    page_consult.userInfo = userInfo;
                }
            });

            page_consult.init = function(cfg){
            
            var params = {
                  questionId:$.QuickUrlUtils.getRequest("questionId")
              };
              
              $.QuickRemote.AjaxJson({
                funcName:"/api/gzd/question/questionDetail"
                ,callback:function(data){
                  $(".questDetailInfo").find(".title").html("提问："+data["content"]);
                  $(".questDetailInfo").find(".questionTime").html("提问时间："+data["postTime"]);
                   var images = data["imageUri"];
                    var lis=[];
                    //是否存在图片判断
                    if(!StringUtils.isEmpty(images) && images.length>0){
                      $(images).each(function(index, item){
                          var quesImage = $($("#quesImage").html());
                          $(quesImage).find("img").attr("src",item);
                          lis.push(quesImage);
                      });

                     $(".questionImage").append(lis);
                     //
                     var scrollerWidth = lis.length*6+"rem";
                     
                      $(".questionImage").css("width",scrollerWidth);
                     //设置宽度
                      
                     /*var scrollerWidth = lis.length*6+"rem";
                     
                     $("#scroller").css("width",scrollerWidth);

                     //滑动效果初始化
                     var myScroll = new IScroll('#wrapper', {
                            scrollX: true,
                            scrollY: false,
                            momentum: false,
                            snap: true,
                            snapSpeed: 400,
                            keyBindings: true,
                            indicators: {
                              el: document.getElementById('indicator'),
                              resize: false
                            }
                          });

                        document.addEventListener('touchmove', function (e) {
                          //阻止其他滑动效果
                       //  e.preventDefault(); 
                       }, isPassive() ? {
                          capture: false,
                          passive: false
                        } : false);*/


                    }else{
                      $(".questionImage").hide();
                    }
                                    
                    initAnswer(data["answers"]);

                },params:params
            });






             

            }

            function initAnswer(ary){

              if(!StringUtils.isEmpty(ary) && ary.length>0){
                var dataMap = {};
                for(var i = 0;i < ary.length; i++){
                  var docId = ary[i].doctorName;
                  var list = [];
                  //如果已存在则获取并添加新的数据
                  if(!StringUtils.isEmpty(dataMap[docId])){  
                    list = dataMap[docId];
                  }

                   list.push(ary[i]);
                    dataMap[docId] = list;

                }

                console.log(dataMap);
                showAnswers(dataMap);

              }

            }

            function showAnswers(data){
              var lis = [];
              //遍历json对象的每个key
                for(var key in data){
                    var item = data[key][0];
                    var questLi = $($("#questLi").html());
                          $(questLi).find(".doc-name").text(item["doctorName"]);
                          $(questLi).find(".questionContent").text(item["content"]);
                          //questionTime
                          $(questLi).find(".questionTime").text(item["postTime"]);
                          $(questLi).find(".answer_detail").attr("data",JSON.stringify(data[key]));
                           $(questLi).find(".answer_detail").attr("answerId",item["answerId"]);
                          lis.push(questLi);
                }

                $("#docList").append(lis);
                $(".answer_detail").on("click",answerDetail);

            }

            function answerDetail(){
              var data = JSON.parse($(this).attr("data"));
              var answerId = $(this).attr("answerId");
              StoreCache.setCache("answerDetails",data);
              console.log(data);
               $.pageSwitch.goToUrl("onlineConsult","consultDetail","answerId="+answerId);
            }
            function isPassive() {
                var supportsPassiveOption = false;
                try {
                    addEventListener("test", null, Object.defineProperty({}, 'passive', {
                        get: function () {
                            supportsPassiveOption = true;
                        }
                    }));
                } catch(e) {}
                return supportsPassiveOption;
            }
            
          
            return page_consult;
        })(jQuery, {});
    </script>
<!-- 图片滑动 -->
<script type="text/html" id="quesImage">
   <div class="slide">
     <div class="painting giotto"><img src="/static/images/ico1.png"></div>
    </div>
</script>
<!-- 医生回复li -->
<script type="text/html" id="questLi">
  <li class="doc_answer">
              <div class="item-inner big-box docMes">
                   <div class="doc-box  item-media">
                       <img src="/static/images/doctor/doc.png">
                   </div>
                   <div class="docInfo">
                       <p class="doc-base"><span class="doc-name">王超</span><span class="flag "></span></p>
                       
                   </div>

               </div>
               <div class="item-inner big-box">
                            
                  <div class="questionContent"></div>
              </div>
             
               <div class="questionTime" ></div>
              <div class="item-inner big-box docMes" style="display: block;width: 100%">
                                    
                <span class="flag answer_detail">详情</span>
                               
               </div>
               
            </li>

</script>
</head>
<body >
<section class="page-wrap page-user">
    <!--内容-->
    <div class="plane-box first">
       
        <ul class="default-list" id="docList">
            <li class="questDetailInfo">
               <div class="item-inner big-box">

                     <div class="questionContent title" >提问：血糖控制总是反复怎么办？</div>
                      
                      
                   
               </div>
                <div style="overflow-x: scroll;overflow-y: hidden;">
               <div class="questionImage" >

                <!-- <div id="viewport">
                    <div id="wrapper">
                      <div id="scroller">
                      
                      </div>
                    </div>
                  </div>
                  <div id="indicator">
                    <div id="dotty"></div> -->
                  </div>
                  </div>
                <div class="questionTime">提问时间：2018-09-22 12:22:32</div>
               </div>
               
            </li>
            <!-- demo注释
             <li class="doc_answer">
              <div class="item-inner big-box docMes">
                   <div class="doc-box  item-media">
                       <img src="/static/images/doctor/doc.png">
                   </div>
                   <div class="docInfo">
                       <p class="doc-base"><span class="doc-name">王超</span><span class="flag "></span></p>
                       
                   </div>

               </div>

               <div class="questionTime">2018-09-22 12:22:32</div>
               <div class="item-inner big-box">
                            
                  <div class="questionContent">血糖控制总是反复怎么办3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</div>
                   </div>
               
            </li> -->
          
        </ul>
    </div>
    <!--内容END-->
   
</section>



</body>
</html>
